<template>
	<view class="container">
		<view 
		class="chain_contain"
		:style="Style"
		>
			<scroll-view 
			class="chain_class"
			scroll-y
			>
				<view :class="CruIndex==index ? 'chain_items chain_items_active':'chain_items'" v-for="(item,index) of chainlist" :key = "index" @click="chainId(index)">
					<text class="actline" v-if="CruIndex==index"></text>
					<text class="chain_title">{{item.title}}</text>
				</view>
			</scroll-view>
			<scroll-view 
			class="chain_name"
			scroll-y
			scroll-with-animation
			:scroll-into-view="cruId"
			upper-threshold	= "50"
			>
				<view 
				class="item_contain" 
				v-for="(item,index) of chainlist"
				:key="index"
				:id="'pro'+index"
				>
					<view class="item_title">
						{{item.title}}
					</view>
					<view 
					scroll-y 
					class="item_content" 
					>
						<view class="items"  v-for = "(items,idx) of item.list" :key = "idx">
							<view class="images">
								<image :src="items.image" mode="" width="100%" height="100%"></image>
							</view>
							<view class="nodes">
								<view class="nodes_sup">
									{{items.suptitle}}
								</view>
								<view class="nodes_sub">
									{{items.subtitle}}
								</view>
								<view class="price_pro">
										<view class="pricecont">
											<view class="price">
												<text class="icon">￥</text>
												<text class="num">{{items.price}}</text>
											</view>
											<view class="discont">
												<text>￥</text>
												<view class="discon">
													{{items.discount}}
												</view>
											</view>
										</view>
										<uni-icons type="plus-filled"color="#EDD220" size="26"></uni-icons>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			chainlist:{
				type:Array,
			},
			Style:{
				type:String
			}
		},
		onReady:function(){
			console.log(this.$props.Style)
		},
		data() {
			return {
				cruId:"",
				CruIndex:0
			}
		},
		methods: {
			chainId(index){
				this.cruId="pro"+index
				this.CruIndex = index
				
			},
			scrolltoupper (){
				console.log('a')
			}
		}
	}
</script>

<style scoped>
.container{
	box-sizing: border-box;
	padding: 0 18rpx 0 19rpx;
}
.chain_contain{
	display: flex;
	justify-content: space-between;
	height: 500rpx;
	width: 100%;

}
.chain_class{
	width:170upx;
	height: 100%;
	background-color: #f5f5f5;
}
.chain_items{
	display: flex;
	margin-top: 5upx;
	align-items: center;
	height: 84upx;

}
.chain_items_active{
	background-color: #fff;
	border-radius: 4px;
	font-weight: 900;
}
.actline{
	display: block;
	width: 5.5upx;
	height: 28upx;
	background-color: #26b825;
	border-radius: 2px;
	margin-left:5upx;
}
.chain_title{
	font-size: 24upx;
	line-height: ;
	margin-left: 18upx;
}
.chain_name{
	border-radius: 5px;
	width: 515rpx;
	height: 100%;
	background: #fff;
	padding:0 0upx 0 20upx;
}

.chain_name .item_contain{
	width: 100%;
	
	background-color: #fff;
}
.chain_name .item_contain .item_title{
	width: 100%;
	margin-top: 30upx;
	font-size: 24upx;

}

.chain_name .item_contain .item_content{
	height: 100%;
	margin-top: 30upx;	
	margin-right: 30upx;
	
}
.chain_name .item_contain .item_content:last-child .items{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #f3f3f3;
	margin-bottom:30upx ;
	height: 166upx;

}
.chain_name .item_contain .item_content .items:last-child{
		border-bottom: none;
		margin-bottom:0upx ;

}
.chain_name .item_contain .item_content .items .images{
	width: 150upx;
	height: 135upx;
}
.chain_name .item_contain .item_content .items image{
	width: 150upx;
	height: 135upx;
}
.chain_name .item_contain .item_content .items .nodes{
	width: 332upx;
	height: 135upx;
	margin-left: 20upx;
}
.nodes_sup{
	font-size: 25upx;
	font-weight: 900;
}
.nodes_sub{
	font-size: 16upx;
	width: 276upx;
	color: #9c9c9c;
	margin-top: 10upx;
	line-height: 25upx;
}
.price_pro{
	display: flex;
	justify-content: space-between;
	height: 45upx;
	margin-top: 10upx;
	align-items: center;
}
.pricecont{
	width: 165upx;
	font-size: 21upx;
	display: flex;

	color: #f23b17;
}
.price{
	color: #f23b17;
	
}
.discont{
	display: flex;
	font-size: 14upx;
	align-items: center;
	margin-left: 10upx;
	color: #9c9c9c;
	text-decoration: line-through;
}

</style>

</style>